<style scoped>
    .user-info{height:45px;padding:0 10px;box-sizing: border-box;}
    .user-info p{width:50%;}
    .status{padding:30px 20px;}
    .status i{font-size:90px;margin-bottom:20px;}
    .fill-btn{height:50px;margin:10px;border-radius:5px;}
    .fill-btn.grey{background-color:#ccc;}
    .quota{padding:0 50px 40px;}
    .text-center{text-align:center;}
</style>
<template>
  <wrap title="用户详情">
    <div slot="page" class="light-bg" style="padding-bottom:40px;">
      <div class="user-info border-bottom flex flex-align-center" v-if="info.orderId">
        <p class="flex"><span class="grey-6 flex-child-noshrink">单号：</span><em class="ellipsis margin-right">{{info.orderId||0}}　</em></p>
        <p class="flex"><span class="grey-6 flex-child-noshrink">时间：</span><em class="lines-1">{{info.time||''}}</em></p>
      </div>
      <div class="user-info border-bottom flex flex-align-center">
        <p><span class="grey-6">姓名：</span>{{info.name||''}}</p>
        <p><span class="grey-6">电话：</span>{{info.phone||''}}</p>
      </div>
      <div class="status flex flex-col flex-justify-center flex-align-center">
        <i class="fa fa-file-archive-o grey-9" aria-hidden="true" v-if="info.status.code==1"></i>
        <i class="fa fa-clock-o blue" aria-hidden="true" v-if="info.status.code==2"></i>
        <i class="fa fa-ban red" aria-hidden="true" v-if="info.status.code==3"></i>
        <i class="fa fa-calendar-check-o blue" aria-hidden="true" v-if="info.status.code==4"></i>
        <i class="fa fa-clock-o blue" aria-hidden="true" v-if="info.status.code==5"></i>
        <i class="fa fa-ban red" aria-hidden="true" v-if="info.status.code==6"></i>
        <i class="fa fa-check-circle-o green" aria-hidden="true" v-if="info.status.code==7||info.status.code==9"></i>
        <i class="fa fa-frown-o red" aria-hidden="true" v-if="info.status.code==8"></i>
        <p class="font-16 text-center">{{info.status.title}}</p>
        <p class="grey-9 margin-top" v-if="info.status.description" >{{info.status.description}}</p>
      </div>

      <!--<div v-if="info.status.code<7" class="fill-btn-box">
        <router-link :to="info.status.code!=1&&info.status.code!=3?'':info.status.code==3?'/fill/bank/'+userId+'-'+info.orderId:'/fill/accredit/'+userId+'-'+info.orderId" v-if="info.status.code<4" :class="[info.status.code!=1&&info.status.code!=3?'grey':'']" class="fill-btn flex flex-center blue-bg">
          <span class="light font-18">{{info.status.code==3?'修改':'填写'}}详细资料</span>
        </router-link>       
        <router-link :to="info.status.code<2||info.status.code==3||info.status.code==5?'':'/picture/'+userId+'-'+info.orderId" :class="[info.status.code<2||info.status.code==3||info.status.code==5?'grey':'']" class="fill-btn flex flex-center blue-bg">
            <span class="light font-18">{{info.status.code==6?'修改':'上传'}}图片资料</span>
          </router-link>    
      </div>-->

      <div v-if="info.status.code==1||info.status.code==3" class="fill-btn-box">
        <router-link :to="info.status.code!=1&&info.status.code!=3?'':info.status.code==3?'/fill/bank/'+userId+'-'+info.orderId:'/fill/accredit/'+userId+'-'+info.orderId" v-if="info.status.code<4" :class="[info.status.code!=1&&info.status.code!=3?'grey':'']" class="fill-btn flex flex-center blue-bg">
          <span class="light font-18">{{info.status.code==3?'修改':'填写'}}详细资料</span>
        </router-link>      
      </div>
      
      <div class="quota flex flex-justify-around" v-if="info.status.code==7||info.status.code==9">
        <p><span class="grey-9">额度：</span>{{info.status.quota}}</p>
        <p><span class="grey-9">首付比例：</span>{{info.status.downPaymentRatio}}%</p>
      </div>

      <router-link :to="'/protocol/'+userId+'-'+info.orderId" class="fill-btn flex flex-center blue-bg" v-if="info.status.code==9">
        <span class="light font-18">上传合同签署照片及合照</span>
      </router-link>

      <div class="flex flex-center">
        <a href="javascript:;" class="blue padding" @click="fetch(1)">刷新</a>
      </div>
    </div>
  </wrap>
</template>
<script>
    /*
    * 1-等待填写资料
    * 2-正在审核详细资料
    * 3-详细资料未通过审核
    * 4-详细资料审核通过
    * 5-正在审核图片资料
    * 6-图片资料未通过审核
    * 7-申请成功
    * 8-申请失败
    * 9-未上传上传合同签署照片及合照
    * */
    import mixins from '~/mixins'
    import wrap from '../components/wrap.vue'
    export default {
      mixins: [mixins],
      components: {wrap},
      data () {
        return {
          userId: 305762,
          info: {
            orderId: 0,
            time: '',
            name: '',
            phone: '',
            status: {
              code: 1,
              title: '',
              description: '',
              quota: '',
              downPaymentRatio: ''
            }
          }
        }
      },
      created () {
        this.fetch()
      },
      methods: {
        fetch (isRefresh) {
            /* eslint-disable*/
          const loading = layer.open({type: 2, shadeClose: false})
          const self = this
          self.userId = self.$route.params.id
          self.request({act: 'getDetail', body: {platUserId: self.userId}}).then(res => {
            layer.closeAll()
            if (res.code == 0) {
              self.info = res.data
            } else {
              layer.open({
                content: res.userMsg,
                btn: ['好的']
              })
            }
          }, err => {
            layer.close(loading)
          })
        }
      }
    }
</script>
